<!-- 15课程收藏表-13课程-2用户 -->
<template>
    <div class="about">
        <el-form :inline="true" :v-model="queryInfo" class="demo-form-inline">
            <el-form-item label="用户昵称">
                <el-input v-model="queryInfo.nickName" placeholder="请输入关键字" clearable @input="handleInputChange" />
            </el-form-item>
            <el-form-item label="课程名称">
                <el-input v-model="queryInfo.courseName" placeholder="请输入关键字" clearable @input="handleInputChange" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getList">搜索</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column type="selection" width="80" />
            <el-table-column v-if="showId" fixed prop="id" label="编号" width="120" />
            <el-table-column v-if="showNickNameColumn" prop="user.nickName" label="用户昵称" width="150" />
            <el-table-column v-if="showCourseNameColumn" prop="course.courseName" label="课程名称" width="150" />
        </el-table>
    </div>
    <el-pagination v-model:current-page="queryInfo.pageNum" v-model:page-size="queryInfo.pageSize"
    :page-sizes="[1, 5, 10, 20]" size="default" background="false" layout="total, sizes, prev, pager, next, jumper"
    :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</template>

<script setup>
//引入
import { onMounted, ref } from 'vue';
import { ElMessage } from 'element-plus'
import axios from 'axios'
onMounted(() => {
    console.log('onMounted')
    getList();
})
const queryInfo = ref({
    pageNum: 1,
    pageSize: 5,
    id: '',
    nickName: '',
    courseName: '',
})
const total = ref(0);
const tableData = ref([]);
const showNickNameColumn = ref(true);
const showCourseNameColumn = ref(true);
const showId = ref(true);
//获取列表
const getList = () => {
    axios.get("/coursecollection/selectCoursemark",
        {
            params: queryInfo.value
        })
        .then(resp => {
            console.log(resp.data.data.list)
            if (resp.data.code == 1) {
                total.value = resp.data.data.total
                tableData.value = resp.data.data.list
            } else {
                ElMessage({
                    message: "查询失败！",
                    type: 'error',
                })
            }
        })
}
//输入框内容变化处理
const handleInputChange = () => {
    if (queryInfo.value.nickName &&!queryInfo.value.courseName) {
        showId.value=false;
        showNickNameColumn.value = false;
        showCourseNameColumn.value = true;
    } else if (queryInfo.value.courseName &&!queryInfo.value.nickName) {
        showId.value=false;
        showNickNameColumn.value = true;
        showCourseNameColumn.value = false;
    } else {
        showId.value=true;
        showNickNameColumn.value = true;
        showCourseNameColumn.value = true;
    }
}
//分页
const handleSizeChange = (val) => {
    queryInfo.value.pageSize = val;
    queryInfo.value.pageNum = 1;
    getList();
}
const handleCurrentChange = (val) => {
    queryInfo.value.pageNum = val;
    getList();
}
</script>

<style scoped></style>